
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二进制王国的冒险 | Binary Kingdom Adventure</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .dot {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            transition: all 0.3s ease;
        }
        .dot-active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
        }
        .dot-inactive {
            background: #e5e7eb;
            border: 2px solid #d1d5db;
        }
        .bit-button {
            transition: all 0.3s ease;
        }
        .bit-button:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        .bit-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .current-bit {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
            50% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-10px); }
            75% { transform: translateX(10px); }
        }
        .shake {
            animation: shake 0.5s;
        }
        .story-box {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .tower-lit {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            border: 3px solid #fbbf24;
            box-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
        }
        .tower-dark {
            background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
            border: 3px solid #6b7280;
        }
        .tower-pending {
            background: white;
            border: 3px solid #e5e7eb;
        }
        .book-card {
            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .book-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-purple-50 min-h-screen p-8">
    <div class="max-w-6xl mx-auto">
        <!-- 标题 -->
        <div class="text-center mb-8">
            <h1 class="text-4xl font-bold text-gray-800 mb-2">🏰 二进制王国的冒险</h1>
            <h2 class="text-2xl text-gray-600">Binary Kingdom Adventure</h2>
        </div>

        <!-- 故事背景 + 游戏说明 -->
        <div class="story-box rounded-3xl shadow-2xl p-8 mb-6 text-white">
            <div class="flex items-start gap-4 mb-6">
                <div class="text-6xl">🧙‍♂️</div>
                <div class="flex-1">
                    <h3 class="text-2xl font-bold mb-3">📖 故事背景 | Story Background</h3>
                    <div class="grid md:grid-cols-2 gap-4 text-sm leading-relaxed">
                        <div class="bg-white bg-opacity-20 rounded-xl p-4 backdrop-blur">
                            <p class="mb-2">在遥远的计算机世界里，有一个神奇的<strong>二进制王国</strong>。这里只有两位居民：<strong>0 先生</strong>和<strong>1 女士</strong>。</p>
                            <p class="mb-2">王国的智慧长老发现，任何十进制数字都可以用二进制语言来表达！但是，王国里的<strong>7座魔法塔</strong>需要按照特定的顺序点亮。</p>
                            <p class="mb-2">这7座塔从右到左分别代表：<strong>1, 2, 4, 8, 16, 32, 64</strong> 的魔法能量。</p>
                            <p>你的任务是：帮助长老正确地点亮魔法塔，将十进制数字转换成二进制密码！</p>
                        </div>
                        <div class="bg-white bg-opacity-20 rounded-xl p-4 backdrop-blur">
                            <p class="mb-2">In a distant computer world, there exists a magical <strong>Binary Kingdom</strong>, home to only two residents: <strong>Mr. 0</strong> and <strong>Ms. 1</strong>.</p>
                            <p class="mb-2">The kingdom's wise elder discovered that any decimal number can be expressed in binary language! However, the kingdom's <strong>7 Magic Towers</strong> must be lit in a specific order.</p>
                            <p class="mb-2">From right to left, these towers represent magical energies of: <strong>1, 2, 4, 8, 16, 32, 64</strong>.</p>
                            <p>Your mission: Help the elder correctly light the magic towers and convert decimal numbers into binary codes!</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 游戏规则和说明 -->
            <div class="bg-yellow-300 bg-opacity-30 rounded-xl p-5 border-2 border-yellow-200">
                <p class="font-bold text-xl mb-3 flex items-center gap-2">
                    <span>🎮</span>
                    <span>游戏规则与玩法 | Game Rules & Instructions</span>
                </p>
                <div class="grid md:grid-cols-2 gap-4 text-sm">
                    <div class="space-y-2">
                        <p class="font-semibold text-base mb-2">📋 中文说明：</p>
                        <p><strong>1️⃣ 开始游戏：</strong>点击"开始冒险"生成一个1-99的随机数</p>
                        <p><strong>2️⃣ 判断顺序：</strong>必须从<strong>最大的塔（64）</strong>开始，依次向<strong>最小的塔（1）</strong>判断</p>
                        <p><strong>3️⃣ 判断规则：</strong></p>
                        <ul class="ml-6 space-y-1">
                            <li>✅ 剩余能量 ≥ 塔能量 → 点亮塔（选 <strong class="text-yellow-200">💡 1</strong>）</li>
                            <li>✅ 剩余能量 < 塔能量 → 保持熄灭（选 <strong class="text-yellow-200">⚫ 0</strong>）</li>
                        </ul>
                        <p><strong>4️⃣ 错误提示：</strong><span class="text-yellow-200">选错了魔法会失效，系统会提示你重新选择！</span></p>
                        <p><strong>5️⃣ 视觉反馈：</strong></p>
                        <ul class="ml-6 space-y-1">
                            <li>🔥 选择 1 → 塔会<strong class="text-yellow-200">发光（金色）</strong></li>
                            <li>🌑 选择 0 → 塔会<strong class="text-gray-300">熄灭（灰色）</strong></li>
                            <li>💫 能量矩阵实时显示剩余数量</li>
                        </ul>
                        <p><strong>6️⃣ 完成挑战：</strong>所有7座塔判断完毕，长老会祝贺你！🎉</p>
                    </div>
                    <div class="space-y-2">
                        <p class="font-semibold text-base mb-2">📋 English Instructions:</p>
                        <p><strong>1️⃣ Start:</strong> Click "Start Adventure" to generate a random number (1-99)</p>
                        <p><strong>2️⃣ Order:</strong> Must start from the <strong>largest tower (64)</strong> to the <strong>smallest (1)</strong></p>
                        <p><strong>3️⃣ Rules:</strong></p>
                        <ul class="ml-6 space-y-1">
                            <li>✅ Remaining ≥ Tower → Light it (choose <strong class="text-yellow-200">💡 1</strong>)</li>
                            <li>✅ Remaining < Tower → Keep off (choose <strong class="text-yellow-200">⚫ 0</strong>)</li>
                        </ul>
                        <p><strong>4️⃣ Error Handling:</strong><span class="text-yellow-200"> Wrong choice breaks magic, system prompts you to try again!</span></p>
                        <p><strong>5️⃣ Visual Feedback:</strong></p>
                        <ul class="ml-6 space-y-1">
                            <li>🔥 Choose 1 → Tower <strong class="text-yellow-200">glows (golden)</strong></li>
                            <li>🌑 Choose 0 → Tower <strong class="text-gray-300">darkens (gray)</strong></li>
                            <li>💫 Energy matrix updates in real-time</li>
                        </ul>
                        <p><strong>6️⃣ Victory:</strong> Complete all 7 towers, the elder congratulates you! 🎉</p>
                    </div>
                </div>
            </div>

            <!-- 教育意义 -->
            <div class="mt-4 bg-green-400 bg-opacity-30 rounded-xl p-4 border-2 border-green-200">
                <h4 class="font-bold text-base mb-2 flex items-center gap-2">
                    <span>💡</span>
                    <span>教育意义 | Educational Value</span>
                </h4>
                <div class="grid md:grid-cols-2 gap-4 text-xs">
                    <div>
                        <p>通过这个游戏，学生可以理解二进制的本质、掌握转换方法、培养逻辑思维、体验计算机如何存储和处理数据。</p>
                    </div>
                    <div>
                        <p>Through this game, students understand binary nature, master conversion methods, develop logical thinking, and experience how computers store and process data.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主游戏区域 -->
        <div class="bg-white rounded-3xl shadow-2xl p-8 mb-6">
            <!-- 上层：十进制显示区 -->
            <div class="mb-8 p-6 bg-gradient-to-r from-blue-100 to-purple-100 rounded-2xl">
                <div class="text-center mb-6">
                    <div class="text-lg text-gray-700 mb-2">
                        <span class="font-semibold">🎯 目标能量 Target Energy:</span>
                        <span id="originalNumber" class="text-3xl font-bold text-blue-600 ml-3">-</span>
                    </div>
                    <div class="text-lg text-gray-700">
                        <span class="font-semibold">⚡ 剩余能量 Remaining Energy:</span>
                        <span id="currentNumber" class="text-3xl font-bold text-purple-600 ml-3">-</span>
                    </div>
                </div>

                <!-- 10x10 矩阵点阵 -->
                <div class="flex justify-center">
                    <div id="dotMatrix" class="inline-grid grid-cols-10 gap-2 p-4 bg-white rounded-xl shadow-inner">
                        <!-- 由 JavaScript 生成 100 个点 -->
                    </div>
                </div>
            </div>

            <!-- 当前提示 -->
            <div id="hintBox" class="mb-6 p-4 bg-blue-50 border-l-4 border-blue-400 rounded-lg hidden">
                <p class="text-gray-700 font-medium" id="hintText"></p>
            </div>

            <!-- 错误提示 -->
            <div id="errorBox" class="mb-6 p-4 bg-red-50 border-l-4 border-red-400 rounded-lg hidden">
                <p class="text-red-700 font-bold" id="errorText"></p>
            </div>

            <!-- 下层：二进制位选择区（魔法塔） -->
            <div class="mb-6">
                <h3 class="text-xl font-bold text-gray-800 text-center mb-2">
                    🗼 魔法塔 Magic Towers
                </h3>
                <p class="text-center text-gray-600 mb-4 text-sm">
                    💡 金色=点亮(1) | Golden=Lit(1) &nbsp;&nbsp;|&nbsp;&nbsp; 🌑 灰色=熄灭(0) | Gray=Dark(0)
                </p>
                <div class="grid grid-cols-7 gap-4" id="bitsContainer">
                    <!-- 由 JavaScript 生成 -->
                </div>
            </div>

            <!-- 二进制结果显示 -->
            <div class="mb-6 p-6 bg-gray-50 rounded-xl">
                <div class="text-center">
                    <p class="text-lg text-gray-700 mb-3 font-semibold">
                        🔮 二进制密码 Binary Code
                    </p>
                    <div id="binaryResult" class="text-4xl font-mono font-bold text-gray-800 tracking-wider">
                        _ _ _ _ _ _ _
                    </div>
                </div>
            </div>

            <!-- 控制按钮 -->
            <div class="flex justify-center gap-4">
                <button onclick="startNewGame()" class="px-8 py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl font-semibold hover:from-blue-600 hover:to-blue-700 shadow-lg transition-all">
                    🎮 开始冒险 Start Adventure
                </button>
                <button onclick="resetGame()" class="px-8 py-3 bg-gradient-to-r from-gray-500 to-gray-600 text-white rounded-xl font-semibold hover:from-gray-600 hover:to-gray-700 shadow-lg transition-all">
                    🔄 重新开始 Reset
                </button>
            </div>
        </div>

        <!-- 书籍推荐区 -->
        <div class="book-card rounded-3xl shadow-2xl p-8 mb-6 border-4 border-yellow-400">
            <div class="flex items-center justify-center gap-2 mb-6">
                <span class="text-3xl">📚</span>
                <h3 class="text-2xl font-bold text-gray-800">想了解更多AI知识？</h3>
                <span class="text-3xl">✨</span>
            </div>
            
            <div class="grid md:grid-cols-3 gap-6 items-center">
                <!-- 书籍封面 -->
                <div class="flex justify-center">
                    <div class="bg-white p-4 rounded-2xl shadow-xl">
                        <img src="book-cover.png" alt="《人工智能真好玩-写给孩子的AI科普书》封面" class="w-full max-w-xs rounded-lg shadow-lg">
                    </div>
                </div>
                
                <!-- 书籍信息 -->
                <div class="md:col-span-2 space-y-4">
                    <div>
                        <h4 class="text-2xl font-bold text-gray-800 mb-2">《人工智能真好玩-写给孩子的AI科普书》</h4>
                        <p class="text-lg text-gray-600">作者：<span class="font-semibold text-purple-700">哈莹</span></p>
                    </div>
                    
                    <div class="bg-white bg-opacity-70 rounded-xl p-4">
                        <p class="text-gray-700 leading-relaxed mb-3">
                            🤖 这本书用生动有趣的方式，带孩子们探索人工智能的奇妙世界！<br/>
                            🎯 从基础概念到实际应用，让复杂的AI知识变得简单易懂。<br/>
                            💡 培养孩子的科技思维，为未来做好准备！
                        </p>
                    </div>
                    
                    <div class="flex flex-wrap gap-3">
                        <div class="bg-blue-500 text-white px-4 py-2 rounded-lg font-semibold flex items-center gap-2 shadow-md">
                            <span>📖</span>
                            <span>各大书店均有销售</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 版权信息 -->
        <div class="bg-white rounded-2xl shadow-xl p-6 text-center">
            <p class="text-gray-600 mb-2">
                🎮 本游戏由 <strong class="text-purple-600">哈莹</strong> 老师开发 | Developed by Ha Ying
            </p>
            <p class="text-sm text-gray-500">
                免费供教育使用 | Free for Educational Use
            </p>
        </div>
    </div>

    <!-- 成功弹窗 -->
    <div id="successModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-3xl p-8 max-w-md mx-4 transform transition-all">
            <div class="text-center">
                <div class="text-6xl mb-4">🎉✨</div>
                <h3 class="text-2xl font-bold text-gray-800 mb-3">恭喜！太棒了！</h3>
                <h4 class="text-xl font-semibold text-gray-600 mb-4">Congratulations! Amazing!</h4>
                <div class="bg-gradient-to-r from-yellow-100 to-orange-100 rounded-xl p-4 mb-4">
                    <p class="text-gray-700 mb-2">🧙‍♂️ 长老说 | The Elder says:</p>
                    <p class="text-sm text-gray-600 italic mb-3">"你成功点亮了所有魔法塔！你已经掌握了二进制的奥秘！"</p>
                    <p class="text-sm text-gray-600 italic">"You've lit all magic towers! You've mastered the secret of binary!"</p>
                </div>
                <div class="bg-gradient-to-r from-blue-100 to-purple-100 rounded-xl p-4 mb-6">
                    <p class="font-mono text-lg">
                        <span class="font-bold text-blue-600" id="modalDecimal">0</span>
                        <span class="text-gray-600 mx-2">→</span>
                        <span class="font-bold text-purple-600" id="modalBinary">0000000</span>
                    </p>
                </div>
                <button onclick="closeModal()" class="px-8 py-3 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-xl font-semibold hover:from-green-600 hover:to-green-700 shadow-lg transition-all">
                    🌟 继续冒险 Continue Adventure
                </button>
            </div>
        </div>
    </div>

    <script>
        const bits = [64, 32, 16, 8, 4, 2, 1];
        let originalNumber = 0;
        let currentNumber = 0;
        let currentBitIndex = 0;
        let binaryResult = [];
        let gameStarted = false;

        // 初始化矩阵点阵
        function initDotMatrix() {
            const matrix = document.getElementById('dotMatrix');
            matrix.innerHTML = '';
            for (let i = 0; i < 100; i++) {
                const dot = document.createElement('div');
                dot.className = 'dot dot-inactive';
                dot.id = `dot-${i}`;
                matrix.appendChild(dot);
            }
        }

        // 更新矩阵显示
        function updateDotMatrix(value) {
            for (let i = 0; i < 100; i++) {
                const dot = document.getElementById(`dot-${i}`);
                if (i < value) {
                    dot.className = 'dot dot-active';
                } else {
                    dot.className = 'dot dot-inactive';
                }
            }
        }

        // 初始化二进制位按钮
        function initBits() {
            const container = document.getElementById('bitsContainer');
            container.innerHTML = '';
            bits.forEach((bit, index) => {
                const bitDiv = document.createElement('div');
                bitDiv.className = 'text-center';
                bitDiv.id = `tower-container-${index}`;
                bitDiv.innerHTML = `
                    <div class="tower-pending rounded-xl p-4 transition-all duration-500">
                        <div class="mb-3">
                            <div class="text-4xl mb-1" id="tower-icon-${index}">🗼</div>
                            <div class="font-bold text-gray-700 text-lg">${bit}</div>
                        </div>
                        <div class="flex flex-col gap-2">
                            <button onclick="selectBit(${index}, 1)" 
                                    id="bit-${index}-1" 
                                    class="bit-button px-4 py-2 bg-green-500 text-white rounded-lg font-bold text-lg hover:bg-green-600" 
                                    disabled>
                                💡 1
                            </button>
                            <button onclick="selectBit(${index}, 0)" 
                                    id="bit-${index}-0" 
                                    class="bit-button px-4 py-2 bg-gray-500 text-white rounded-lg font-bold text-lg hover:bg-gray-600" 
                                    disabled>
                                ⚫ 0
                            </button>
                        </div>
                    </div>
                `;
                container.appendChild(bitDiv);
            });
        }

        // 开始新游戏
        function startNewGame() {
            originalNumber = Math.floor(Math.random() * 99) + 1;
            currentNumber = originalNumber;
            currentBitIndex = 0;
            binaryResult = [];
            gameStarted = true;

            document.getElementById('originalNumber').textContent = originalNumber;
            document.getElementById('currentNumber').textContent = currentNumber;
            document.getElementById('binaryResult').textContent = '_ _ _ _ _ _ _';
            document.getElementById('errorBox').classList.add('hidden');

            updateDotMatrix(currentNumber);
            initBits();
            enableCurrentBit();
            updateHint();
        }

        // 重置游戏
        function resetGame() {
            gameStarted = false;
            originalNumber = 0;
            currentNumber = 0;
            currentBitIndex = 0;
            binaryResult = [];

            document.getElementById('originalNumber').textContent = '-';
            document.getElementById('currentNumber').textContent = '-';
            document.getElementById('binaryResult').textContent = '_ _ _ _ _ _ _';
            document.getElementById('hintBox').classList.add('hidden');
            document.getElementById('errorBox').classList.add('hidden');

            updateDotMatrix(0);
            initBits();
        }

        // 启用当前位的按钮
        function enableCurrentBit() {
            if (currentBitIndex < bits.length) {
                const container = document.getElementById(`tower-container-${currentBitIndex}`).firstElementChild;
                container.classList.add('current-bit');
                document.getElementById(`bit-${currentBitIndex}-1`).disabled = false;
                document.getElementById(`bit-${currentBitIndex}-0`).disabled = false;
            }
        }

        // 更新提示
        function updateHint() {
            const hintBox = document.getElementById('hintBox');
            const hintText = document.getElementById('hintText');
            
            if (currentBitIndex < bits.length) {
                const currentBit = bits[currentBitIndex];
                hintBox.classList.remove('hidden');
                
                hintText.innerHTML = `🧙‍♂️ <strong>正在判断第 ${currentBitIndex + 1} 座塔（能量：${currentBit}）| Judging Tower ${currentBitIndex + 1} (Energy: ${currentBit})</strong><br/>
                                     💭 当前剩余能量：${currentNumber} | Current remaining energy: ${currentNumber}<br/>
                                     💡 思考：${currentNumber} ${currentNumber >= currentBit ? '≥' : '<'} ${currentBit}，应该选择哪个？ | Think: Which should you choose?`;
            } else {
                hintBox.classList.add('hidden');
            }
        }

        // 显示错误提示
        function showError(isOne) {
            const errorBox = document.getElementById('errorBox');
            const errorText = document.getElementById('errorText');
            const currentBit = bits[currentBitIndex];
            
            errorBox.classList.remove('hidden');
            
            if (isOne) {
                // 错误地选择了 1
                errorText.innerHTML = `❌ 错误！Wrong!<br/>
                                      剩余能量 ${currentNumber} < 塔能量 ${currentBit}，无法点亮这座塔！<br/>
                                      Remaining energy ${currentNumber} < Tower ${currentBit}, cannot light this tower!<br/>
                                      💡 请选择 0（保持熄灭）| Please choose 0 (keep off)`;
            } else {
                // 错误地选择了 0
                errorText.innerHTML = `❌ 错误！Wrong!<br/>
                                      剩余能量 ${currentNumber} ≥ 塔能量 ${currentBit}，应该点亮这座塔！<br/>
                                      Remaining energy ${currentNumber} ≥ Tower ${currentBit}, should light this tower!<br/>
                                      💡 请选择 1（点亮）| Please choose 1 (light it)`;
            }
            
            // 添加抖动效果
            errorBox.classList.add('shake');
            setTimeout(() => {
                errorBox.classList.remove('shake');
            }, 500);
        }

        // 更新塔的视觉效果
        function updateTowerVisual(index, value) {
            const container = document.getElementById(`tower-container-${index}`).firstElementChild;
            const icon = document.getElementById(`tower-icon-${index}`);
            
            container.classList.remove('current-bit', 'tower-pending');
            
            if (value === 1) {
                // 点亮的塔
                container.classList.add('tower-lit');
                icon.textContent = '🔥';
            } else {
                // 熄灭的塔
                container.classList.add('tower-dark');
                icon.textContent = '🌑';
            }
        }

        // 选择二进制位
        function selectBit(index, value) {
            if (index !== currentBitIndex || !gameStarted) return;

            const currentBit = bits[index];
            const correctAnswer = currentNumber >= currentBit ? 1 : 0;

            // 检查答案是否正确
            if (value !== correctAnswer) {
                showError(value === 1);
                return; // 不继续，让学生重新选择
            }

            // 答案正确，隐藏错误提示
            document.getElementById('errorBox').classList.add('hidden');

            // 记录选择
            binaryResult.push(value);

            // 如果选择1，减去对应的位值
            if (value === 1) {
                currentNumber -= bits[index];
                document.getElementById('currentNumber').textContent = currentNumber;
                updateDotMatrix(currentNumber);
            }

            // 更新塔的视觉效果
            updateTowerVisual(index, value);

            // 禁用当前位按钮
            document.getElementById(`bit-${index}-1`).disabled = true;
            document.getElementById(`bit-${index}-0`).disabled = true;

            // 更新二进制结果显示
            updateBinaryDisplay();

            // 移动到下一位
            currentBitIndex++;

            if (currentBitIndex < bits.length) {
                enableCurrentBit();
                updateHint();
            } else {
                // 游戏完成
                finishGame();
            }
        }

        // 更新二进制显示
        function updateBinaryDisplay() {
            let display = '';
            for (let i = 0; i < 7; i++) {
                if (i < binaryResult.length) {
                    display += binaryResult[i] + ' ';
                } else {
                    display += '_ ';
                }
            }
            document.getElementById('binaryResult').textContent = display.trim();
        }

        // 完成游戏
        function finishGame() {
            gameStarted = false;
            document.getElementById('hintBox').classList.add('hidden');
            document.getElementById('errorBox').classList.add('hidden');
            
            const binaryString = binaryResult.join('');
            document.getElementById('modalDecimal').textContent = originalNumber;
            document.getElementById('modalBinary').textContent = binaryString;
            document.getElementById('successModal').classList.remove('hidden');
        }

        // 关闭弹窗
        function closeModal() {
            document.getElementById('successModal').classList.add('hidden');
        }

        // 页面加载时初始化
        window.onload = function() {
            initDotMatrix();
            initBits();
            updateDotMatrix(0);
        };
    </script>
<script>window.parent.postMessage({ action: "ready" }, "*"); 
 
window.console = new Proxy(console, {
  get(target, prop) {
    if (['log', 'warn', 'error'].includes(prop)) {
      return new Proxy(target[prop], {
        apply(fn, thisArg, args) {
          fn.apply(thisArg, args);
          window.parent.postMessage({ action: 'console', 
            type: prop, 
            args: args.map((arg) => {
              try {
                return JSON.stringify(arg).replace(/^["']|["']$/g, '');
              } catch (e) {
                return arg;
              }
            }) 
          }, '*');
        }
      });
    }
    return target[prop];
  }
});
</script></body>
</html>
